﻿<div class="WAll PL PR PT">

	<p class="ContentBlockTitle">有底色按钮：</p>
	
	<ul class="ListBlock ListBase">
		<li class="ListItem">
			<a href="javascript:;" class="Btn InkRipple">默认按钮</a>
			<a href="javascript:;" class="Btn BtnPrimary InkRipple">首选按钮</a>
			<a href="javascript:;" class="Btn BtnSuccess InkRipple">成功按钮</a>
		</li>
		<li class="ListItem">
			<span class="Btn BtnWarning InkRipple">警告按钮</span>
			<b class="Btn BtnDanger InkRipple">危险按钮</b>
			<b class="Btn BtnDanger BtnGray InkRipple">灰色按钮</b>
		</li>
	</ul>
	<p class="ContentBlockTitle">圆形按钮：</p>
	
	<ul class="ListBlock ListBase">
		<li class="ListItem"><a href="javascript:;" class="Btn InkRipple BtnRound BtnSmall"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a> <a href="javascript:;" class="Btn BtnNoBor InkRipple BtnRound BtnSmall"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a></li>
		<li class="ListItem"><a href="javascript:;" class="Btn InkRipple BtnRound"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a> <a href="javascript:;" class="Btn BtnNoBor InkRipple BtnRound"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a></li>
		<li class="ListItem"><a href="javascript:;" class="Btn InkRipple BtnRound BtnBig"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a> <a href="javascript:;" class="Btn BtnNoBor InkRipple BtnRound BtnBig"><img class="BtnIcon" src="images/svg/iconfont-xinxitishi.svg" alt="信息提示" width="16"/></a></li>
	</ul>
	<p class="ContentBlockTitle">无底色按钮（使用父元素的背景色）：</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem">
			<a href="javascript:;" class="Btn BtnLine InkRipple">默认按钮</a>
			<a href="javascript:;" class="Btn BtnLine BtnPrimary InkRipple">首选按钮</a>
			<a href="javascript:;" class="Btn BtnLine BtnSuccess InkRipple">成功按钮</a>
		</li>
		<li class="ListItem">
			<span class="Btn BtnLine BtnWarning InkRipple">警告按钮</span>
			<b class="Btn BtnLine BtnDanger InkRipple">危险按钮</b>
			<b class="Btn BtnLine BtnGray InkRipple">灰色按钮</b>
		</li>
	</ul>
	<p class="ContentBlockTitle">带图标按钮</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem"><a href="javascript:;" class="Btn InkRipple">
			<img class="BtnIconL" src="images/svg/iconfont-dianhua.svg" alt="电话" width="16"/>
			默认按钮</a> <a href="javascript:;" class="Btn BtnNoBor InkRipple">
			<img class="BtnIconL" src="images/svg/iconfont-dianhua.svg" alt="电话" width="16"/>
			默认按钮</a></li>
		<li class="ListItem"><a href="javascript:;" class="Btn InkRipple">首选按钮<img class="BtnIconR" src="images/svg/iconfont-message.svg" alt="消息" width="16"/></a> <a href="javascript:;" class="Btn BtnNoBor InkRipple">首选按钮<img class="BtnIconR" src="images/svg/iconfont-message.svg" alt="消息" width="16"/></a></li>
	</ul>
	
	<p class="ContentBlockTitle">带数字的按钮</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem">
			<a href="javascript:;" class="Btn InkRipple"><span class="Badge BadgeL">9</span>默认按钮</a>
			<a href="javascript:;" class="Btn BtnPrimary InkRipple"><span class="Badge BadgeL">9</span>首选按钮</a>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="Btn BtnSuccess InkRipple"><span class="Badge BadgeL">9</span>成功按钮</a>
			<span class="Btn BtnWarning InkRipple"><span class="Badge BadgeL">9</span>警告按钮</span>
		</li>
		<li class="ListItem">
			<b class="Btn BtnDanger InkRipple">危险按钮<span class="Badge BadgeR">9</span></b>
			<b class="Btn BtnLine BtnGray InkRipple">灰色按钮<span class="Badge BadgeR">9</span></b>
		</li>
	</ul>
	
	<p class="ContentBlockTitle">按钮尺寸</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem"><button type="button" class="Btn BtnPrimary BtnBig InkRipple">（大按钮）Large button</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnPrimary BtnSmall InkRipple">（小按钮）Small button</button></li>
	</ul>
	
	<p class="ContentBlockTitle">块级按钮</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem"><button type="button" class="Btn BtnPrimary BtnBig BtnBlock InkRipple">（块级元素）Block level button</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnSuccess BtnBlock InkRipple">（块级元素）Block level button</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnLine BtnBig BtnPrimary BtnBlock InkRipple">（块级元素）Block level button</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnLine BtnSuccess BtnBlock InkRipple">（块级元素）Block level button</button></li>
	</ul>
	
	
	<p class="ContentBlockTitle">禁用状态</p>
	<ul class="ListBlock ListBase">
		<li class="ListItem"><button type="button" class="Btn" disabled="disabled">默认按钮</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnSuccess BtnBig" disabled="disabled">按钮</button></li>
		<li class="ListItem"><button type="button" class="Btn BtnLine BtnSuccess BtnBig" disabled="disabled">按钮</button></li>
	</ul>

</div>




















